<template>
	<view class="cart-list">
		<view class="cart-list-container">
			<view class="goods-list">
				<van-card
					v-for="(cart, idx) in cartList"
					:key="idx"
					:price="cart.truePrice"
					:desc="cart.productInfo.attrInfo.suk"
					:title="cart.productInfo.store_name">
					<view slot="thumb" class="thumb">
						<van-checkbox :value="cart.selected" checked-color="#e93323" @change="onCartSelectOrCancel(cart)"></van-checkbox>
						<image :src="cart.productInfo.attrInfo.image"></image>
					</view>
					<view slot="num">
						<NumStepper
							:num="cart.cart_num"
							:maxNum="cart.trueStock"
							@change-num="onChangeCartNum($event, cart)">
						</NumStepper>
					</view>
				</van-card>
			</view>
			<van-submit-bar
			  :price="totalPrice"
			  button-text="立即下单"
			  :disabled="!selectedCartIdsStr"
			  @submit="onSubmitOrder"
			>
			  <van-checkbox :value="isSelectedAll" checked-color="#e93323" @change="onCartAllSelectOrCancel(cart)"></van-checkbox>
			  <view class="all-num-tips">全选({{ selectedNum }})</view>
			</van-submit-bar>
		</view>
	</view>
</template>

<script>
	import {
		getCartList as getCartListApi,
		updateCartNum as updateCartNumApi
	} from '@/api/cart'
	
	import authorizationMixin from '@/mixins/authorization'
	
	import VanCard from '@/wxcomponents/vant/card/index'
	import VanCheckbox from '@/wxcomponents/vant/checkbox/index'
	import VanSubmitBar from '@/wxcomponents/vant/submit-bar/index'
	
	import NumStepper from '@/components/NumStepper'
	
	export default {
		mixins: [authorizationMixin],
		components: {
			VanCard,
			VanCheckbox,
			VanSubmitBar,
			NumStepper
		},
		data() {
			return {
				params: {
					status: 1,
					page: 1,
					limit: 20,
				},
				cartList: [],
				noMore: false,
				isSelectedAll: false
			}
		},
		computed: {
			selectedNum () {
				let selectedNum = 0
				this.cartList.forEach((cart) => {
					if (true === cart.selected) {
						selectedNum++
					}
				})
				
				if (selectedNum === this.cartList.length && selectedNum > 0) {
					this.isSelectedAll = true
				} else {
					this.isSelectedAll = false
				}
				
				return selectedNum
			},
			selectedCartIdsStr () {
				let selectedCartIdsStr = ''
				this.cartList.forEach((cart) => {
					if (true === cart.selected) {
						selectedCartIdsStr += `${cart.id},`
					}
				})
				selectedCartIdsStr = selectedCartIdsStr.substring(0, selectedCartIdsStr.length - 1)
				return selectedCartIdsStr
			},
			totalPrice () {
				let totalPrice = 0
				this.cartList.forEach((cart) => {
					if (true === cart.selected) {
						totalPrice += cart.truePrice * 100 * cart.cart_num
					}
				})
				return totalPrice
			}
		},
		onShow () {
			if (!this.isLogined()) {
				const job = {
					name: '购物车列表检测登录',
					// 自定义函数
					funcs: [
					],
					// 页面方法
					methods: [
					],
					// data数据相关字段对应的数据值
					dataParams: {
					}
				}
				
				job.funcs.push({
					body: (pagePath) => {
						uni.switchTab({
							url: pagePath
						})
					},
					args: [getCurrentPages().pop().$page.fullPath],
					delay: 0
				})
				
				job.methods.push({
					name: this.getCartList,
					delay: 0
				})
				
				this.needLoginCheckClickHandler(job)
			} else {
				this.getCartList()
			}
		},
		methods: {
			onCartSelectOrCancel (cart) {
				cart.selected = !cart.selected
			},
			onCartAllSelectOrCancel () {
				this.isSelectedAll = !this.isSelectedAll
				this.cartList.forEach((cart) => {
					cart.selected = this.isSelectedAll
				})
			},
			onChangeCartNum (num, cart) {
				cart.cart_num = num
				
				this.updateCartNum(cart.id, num)
			},
			onSubmitOrder () {
				uni.navigateTo({
					url: `/pages/order_confirm/order_confirm?cartIds=${this.selectedCartIdsStr}`
				})
			},
			async getCartList () {
				if (this.noMore) {
					return false
				}
				const { status, data, msg } = await getCartListApi(this.params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					data.valid.forEach((item, index) => {
						data.valid[index].selected = false
					})
					if (this.params.page > 1) {
						this.cartList = [...this.cartList, ...data.valid]

						if (data.length === 0) {
							this.noMore = true
						}
					} else {
						this.cartList = data.valid
					}
					  
					if (data.length) {
						this.params.page++
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: msg,
						duration: 3000
					})
				}
			},
			updateCartNum (cartId, num) {
				const params = {
					id: cartId,
					number: num
				}
				updateCartNumApi(params)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart-list {
	&-container {
		::v-deep van-card {
			.thumb {
				display: flex;
				align-items: center;
				image {
					width: 160rpx;
					min-width: 160rpx;
					height: 160rpx;
				}
			}
			.van-card__content {
				padding-left: 20rpx;
			}
		}
		
		.all-num-tips {
			margin-left: 20rpx;
		}
	}
}
</style>
